<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-05 15:16:04
 * @LastEditTime: 2019-11-05 17:52:33
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/db.js"></script>
    <style type="text/css">
        .vin-title {
            background: #e1e1e1;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
        }

        .vin-title a {
            display: block;
            padding: 4px 30px;
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }

        .car-row {
            padding: 6px 30px;
            border-bottom: 1px solid #e5e5e5;
            overflow: hidden;
            position: relative;
            font-size: 13px;
        }

        .car-row img {
            width: 34px;
            height: 34px;
            margin-right: 10px;
        }

        .right-letter {
            position: absolute;
            top: 10px;
            right: 0;
            font-size: 12px;
            text-align: center;
            bottom: 0;
            overflow-y: scroll;
        }

        .right-letter>div {
            width: 20px;
        }

        .right-letter>div>a {
            width: 20px;
            text-decoration: none;
            color: #2687f9;
        }

        .van-search {
            /* background: transparent !important; */
            padding: 6px 0;
            border-bottom: 1px solid #ebedf0;
        }

        /* .van-search__content {
			background: transparent
		} */

        .van-search__action {
            color: #cd1b21;
            font-size: 13px;
            font-weight: 700;
        }

        .result {
            position: absolute;
            left: 0;
            top: 47px;
            bottom: 0;
            width: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="车型列表" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">

                    <div>
                        <form action="">
                            <van-search v-model="carWord" placeholder="请输入车型" show-action v-on:input="focusInput"
                                @search="getSearchList" id="searchForm">
                                <div slot="action" @click="getSearchList">查询</div>
                            </van-search>
                        </form>
                    </div>
                    <div class="result">
                        <div v-for="row in carLists" v-if="row.nodeArray.length > 0 && getIfSHow(row)">
                            <div class="vin-title"><a :name="row.letter">{{row.letter}}</a></div>
                            <div>
                                <div class="car-row" v-for="item in row.nodeArray" v-show="item.isShow"
                                    @click="selectRow(item)">
                                    <img :src="'http:' + item.FLogo" />
                                    <span>{{item.FName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="right-letter">
                    <div v-for="row in letterArray"><a :href="'#' + row">{{row}}</a></div>
                </div>
                <van-loading v-if="showLoading" />
            </div>

        </div>


    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                letterArray: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                carLists: [],
                carWord: ''
            },
            created: function () {
                this.getCar();
            },
            methods: {
                focusInput() {
                    var that = this;
                    try {
                        setTimeout(function () {
                            $('#searchForm')[0].selectionStart = $('#searchForm').val().length;
                            $('#searchForm')[0].selectionEnd = $('#searchForm').val().length;
                        }, 50)
                    } catch (e) {

                    }
                    that.getSearchList();
                },
                getSearchList() {
                    var that = this;
                    for (var i in that.carLists) {
                        for (var j in that.carLists[i].nodeArray) {
                            if (that.carLists[i].nodeArray[j].FName.toUpperCase().indexOf(that.carWord.toUpperCase() || '') == -1) {
                                that.carLists[i].nodeArray[j].isShow = false;
                            } else {
                                that.carLists[i].nodeArray[j].isShow = true;
                            }
                        }
                    }
                },
                getIfSHow(row) {
                    var x = 0;
                    for (var i in row.nodeArray) {
                        if (row.nodeArray[i].isShow) {
                            x = 1;
                        }
                    }
                    return x;
                },
                getCar() {
                    var that = this;
                    that.showLoading = true;
                    FLD.nativeRequest_vin('GetAllAutoBrand', {}, function (datas) {
                        that.showLoading = false;
                        if (datas.status == 200) {
                            var totalArray = [];
                            for (var i in that.letterArray) {
                                var newArray = [];
                                for (var j in datas.data) {
                                    if (that.letterArray[i] == datas.data[j].FAlphabet) {
                                        datas.data[j].isShow = true;
                                        newArray.push(datas.data[j]);
                                    }
                                }
                                totalArray.push({
                                    letter: that.letterArray[i],
                                    nodeArray: newArray
                                })
                            }
                            that.carLists = totalArray;
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })
                },
                selectRow(item) {
                    api.sendEvent({
                        name: 'selectCarItem',
                        extra: {
                            carRow: item
                        }
                    });
                    api.closeWin();
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>